<template>
  <el-container class="base-page-table">
    <el-table
      v-loading="loading"
      :data="tableData"
      highlight-current-row
      height="100%"
      class="base-page-table-box"
      :header-cell-style="headerCellStyle"
      :row-key="rowKey"
      v-bind="$attrs"
      ref="tableRef"
      @sort-change="emit('sort-change')"
    >
      <el-table-column
        v-for="item in tableColumnsData"
        :key="item.id"
        :align="center"
        :show-overflow-tooltip="true"
        v-bind="item"
      >
        <!-- 自定义列内容 -->
        <template v-slot="scope">
          <div v-if="item.customSlot">
            <!-- 插槽内容，可以根据需要自定义 -->
            <slot :name="item.customSlot" :row="scope.row" :index="scope.$index"></slot>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-footer class="base-page-table-footer">
      <!-- <pagination v-if="total > 0" :total="total" v-model:page="pageNum" v-model:limit="pageSize"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
      <pagination
        v-if="total > 0"
        :total="Number(total)"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        @pagination="handleQuery"
      />
    </el-footer>
  </el-container>
</template>

<script setup>
const emit = defineEmits(["handleQuery", "sort-change"]);
const props = defineProps({
  rowKey: {
    type: String,
    default: "id",
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  pageNum: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
  tableColumnsData: {
    type: Array,
    default: () => [
      {
        // label: '标题',
        // prop: 'title',
        // width: 200,
        // align: 'center',
        // customSlot: 'title', // 自定义列内容的插槽名称
        // showOverflowTooltip: true
      },
    ],
  },
});
const pageNum = ref(props.pageNum);
const pageSize = ref(props.pageSize);
const tableRef = ref(null);
function handleQuery(val) {
  console.log(val, "val");
  emit("handleQuery", {
    pageNum: val.page,
    pageSize: val.limit,
  });
}
// 动态设置表头单元格的样式
const headerCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  return {
    backgroundColor: "#fafafa",
    color: "#333",
    borderBottom: "1px solid #e1f3d8",
  };
};
watchEffect(() => {
  pageNum.value = props.pageNum;
  pageSize.value = props.pageSize;
});
defineExpose({
  tableRef,
});
</script>
<style lang="scss" scoped>
.base-page-table {
  border-top: 1px solid #e5e5e5;
  display: flex;
  flex-direction: column;
  height: 100%;

  .base-page-table-box {
    flex: 1;
  }

  .base-page-table-footer {
    height: 50px;
  }
}
</style>
